<!DOCTYPE html>
<html>

<head>
    <title>统计结果</title>
    <script type="text/javascript" src="/static/libs/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/static/libs/jquery-tmpl/jquery.tmpl.min.js"></script>
    <style type="text/css">
    table {
        border-collapse: collapse;
    }
    
    table tr th {
        border: 1px solid #add9c0;
    }
    
    table tr td {
        border: 1px solid #add9c0;
    }

    .a-ca-ht-div {  
      background-image: url(/static/images/xiexian.png);  
      background-size: 100% 100%;  
}  
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th rowspan="2">序号</th>
                <th rowspan="2">姓名</th>
                <th rowspan="2">本月应付</th>
                <th rowspan="2">实际已付</th>
                <th rowspan="2">欠费</th>
                <th colspan="3">非公共消费</th>
            </tr>
            <tr>
                <th>说明</th>
                <th>金额</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody id="body">
            {{ $index := 0}} {{range $key,$value := .data}} {{$length := .ExtraCount}} {{if gt $length 0}} {{range $i,$extra := $value.Extras}}
            <tr>
                {{if eq $i 0}}
                <td rowspan="{{$length}}">{{$index}}</td>
                <td rowspan="{{$length}}">{{$value.UserName}}</td>
                <td rowspan="{{$length}}">{{$value.Total}}</td>
                <td rowspan="{{$length}}">{{$value.Pay}}</td>
                <td rowspan="{{$length}}">{{$value.NeedPay}}</td>
                {{end}}
                <td>
                    {{.Remark}}
                </td>
                <td>
                    {{.Value}}
                </td>
                <td>
                    {{.OccureDate}}
                </td>
            </tr>
            {{end}} {{range $i,$extra := $value.NoEnough}}
            <tr>
                {{if not $value.Loaded}}
                <td rowspan="{{$length}}">{{$index}}</td>
                <td rowspan="{{$length}}">{{$value.UserName}}</td>
                <td rowspan="{{$length}}">{{$value.Total}}</td>
                <td rowspan="{{$length}}">{{$value.Pay}}</td>
                <td rowspan="{{$length}}">{{$value.NeedPay}}</td>
                {{end}}
                <td>
                    {{.Total}}人吃饭
                </td>
                <td>
                    {{.Avg}}
                </td>
                <td>
                    {{.OccureDate}}
                </td>
            </tr>
            {{end}} {{else}}
            <tr>
                <td rowspan="{{$length}}">{{$index}}</td>
                <td rowspan="{{$length}}">{{$value.UserName}}</td>
                <td rowspan="{{$length}}">{{$value.Total}}</td>
                <td rowspan="{{$length}}">{{$value.Pay}}</td>
                <td rowspan="{{$length}}">{{$value.NeedPay}}</td>
                <td class="a-ca-ht-div"></td>
                <td class="a-ca-ht-div"></td>
                <td class="a-ca-ht-div"></td>
            </tr>
            {{end}} {{end}}
        </tbody>
    </table>
    <div>
        公共消费：
        <font color="red">{{.common}}</font>，人均：
        <font color="red">{{.per}}</font>
    </div>
    {{$per := .per}} {{range $k,$v := .data}}
    <div>
        {{$v.UserName}}：{{$per}} {{range $ek,$ev:= .Extras}} + {{$ev.Value}}{{end}} {{range $nk,$nv:= .NoEnough }}+{{$nv.Avg}}{{end}} = {{$v.Total}}
    </div>
    {{end}}
    <script id="detail" type="text/x-jquery-tmpl">
    </script>
    <script type="text/javascript">
    $(function() {
        /*$.getJSON('/book/cash?bookid=1&month=2017-05',function(result){
            //alert(JSON.stringify(result));
            //$('#detail').tmpl(result).appenTo("#body")
        });*/
    });
    </script>
</body>

</html>
